﻿<!doctype html>
<html lang="zh">
<html xmlns:th="http://www.thymeleaf.org" lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<link rel="stylesheet" type="text/css" href="../css/styles.css">
</head>
<body>
<div class="htmleaf-container">
	<div class="wrapper">
		<div class="container">
			<h1>Welcome</h1>
			
			<form class="form"> 
				<input id="name" type="text" placeholder="Username"/>
				<input id="password" type="password" placeholder="Password"/>
				<button id="login-button">Login</button>
				<button id="jump" onclick=window.open("register")>Register</button>
			</form>
		</div>
		
		<ul class="bg-bubbles">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</div>

<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" th:inline="javascript">

$(document).ready(function () {

$("#login-button").click(function(){
        var username = $("#name").val();
        var password = $("#password").val();
         if(username == ""){
             alert("请输入用户名");
             return false;
         }else if(password == ""){
             alert("请输入密码");
             return false;
         }
         //ajax去服务器端校验
         var data= {name:username,password:password};
         
         $.ajax({
			 type:"POST",
             url:"/login",
             data:data,
             async: false,
             dataType:'text',
             success:function(msg){
                 if(msg=='1'){
                 	   alert("登陆成功");
                       window.open("/");  
                 }else{
                     alert("登录失败，请重试!");
                 }
             },
             error:function(msg){
		     alert('失败');
		     }
		   
             
             
         });

         
 });    
 });
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#000000">
<h1>登陆</h1>
</div>
</body>
</html>